<template>
    <div class="login" id="login-app">
        <div class="login-box">
            <img src="../../static/images/login-l.png" alt="">
                <div class="login-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >
            <div class="login-form-title">
                    <img src="../../static/images/logo.png" style="width:139px;height:42px;" alt="" />
            </div>

          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="账号" maxlength="20"
              prefix-icon="iconfont icon-user" />
              <!-- 发送验证码的按钮 -->
              <el-button :disabled='flag' @click="send">{{msg}}</el-button>
          </el-form-item>

          <el-form-item prop="code">
            <el-input v-model="loginForm.code" type="code" placeholder="验证码" prefix-icon="iconfont icon-lock" maxlength="20"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
              @click.native.prevent="handleLogin">
              <span @click="logins">登录</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
  
</template>

<script>
import '../../static/css/login.css'
import axios from '../comm/api'
export default {
    data() {
        return {
            loginForm:{
              mobile:'',
              code:''
            },
            msg:'发送验证码',
            flag:false,
            time:60,
            
            
        };
    },
    mounted() {},

    methods: {
      //登录
      logins(){
        axios.post('/user/login',{
          phone:this.loginForm.mobile,
          code:this.loginForm.code
        }).then((resp) => {
          if (resp.data.code==200){
            alert('登录成功')
            console.log('登录成功',resp)
            localStorage.setItem('token',resp.data.data,token)
          }
        }).catch((err) => {
          console.log('登录失败',err)
        });


      },
      // 发送验证码
      send(){
        //验证手机号是否合法
        var reg=/^1[3-9][0-9]{9}$/
        if (!reg.test(this.loginForm.mobile)){
          alert('手机号不合法')
          return false
        }
        axios.post('/user/sms',{
          phone:this.loginForm.mobile,
        }).then((resp) => {
          if (resp.data.code==200){
            alert('发送成功')
          }else{
            console.log('发送失败',resp)
            alert('发送失败')
          }
        }).catch((err=>{
          console.log('获取失败',err)
        }))
        //合法发送请求
        var t=setInterval(()=>{
          if (this.time==0){
            this.flag=false
            this.msg="发送验证码"
            this.time=60,
            clearInterval(t)
          }else{
            this.msg=this.time+"秒"
            this.time--
            this.flag=true
          }
        },1000)
      
      }

    },
};
</script>

<style></style>
